<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17-beta.0/vue.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue-resource@1.5.1"></script>
    <style>
    *{margin:0;padding: 0;};
    .row::after{
        display: block;
        clear:both;
        content:"";
    }
    ul {
        width: 1200px;
        margin-left: auto;
        margin-right: auto;
    }
    li{
        width:220px;
        list-style: none;
        float: left;
        margin-left: 10px;      
    }
    img{
       width:100%;
        height:280px;
    }
    </style>
</head>
<body>
    <div id="movie">
         <ul class="row">
             <li v-for="item in list">
                 <img v-bind:src="item.image" alt="">
                 <p>{{item.title}}</p>
             </li>
         </ul>
    </div>
    <script>
    new Vue({
        el:"#movie",
        data:{
            list:[]
        },
        beforeCreate(){
            var self=this;
           // var url='https://douban.uieee.com/v2/movie/top250'
            var url = 'https://douban.uieee.com/v2/movie/top250?start=0&count=40'
            this.$http.jsonp(url).then(res=>{
                let subjects=res.body.subjects;
                // console.log(subjects)
                subjects.forEach(element => {
                    let title=element.title;
                    let image=element.images.small;
                    let temp={};
                    temp.title=title;
                    temp.image=image;
                    self.list.push(temp);
                });
                console.log(self.list);
            })
        }
    })
    </script>
</body>
</html>